<template>
  <div class="home">
    <header>
      <h1>全国新冠疫情检测数据中心</h1>
      <span class="undatatimer">更新数据时间：({{ lastUpdateTime }})</span>
      <div class="timer">{{ nowDate }} {{ nowWeek }} {{ nowTime }}</div>
    </header>
    <section>
      <div class="tier_1 first">
        <div class="tier_2 one"></div>
        <div class="tier_2 two"></div>
      </div>
      <div class="tier_1 second">
        <div class="second_top">
          <ul>
            <li>
              <div class="num" style="color: #ff4500">
                {{ chinaTotal.confirm }}
              </div>
              <div class="text">累计确诊</div>
            </li>
            <li>
              <div class="num" style="color: #00ced1">
                {{ chinaTotal.importedCase }}
              </div>
              <div class="text">境外输入</div>
            </li>
            <li>
              <div class="num" style="color: #ffa500">
                {{ chinaTotal.suspect }}
              </div>
              <div class="text">现有疑似</div>
            </li>
            <li>
              <div class="num" style="color: #ff0000">
                {{ chinaTotal.nowConfirm }}
              </div>
              <div class="text">现有确诊</div>
            </li>
          </ul>
        </div>
        <div class="second_bottom">
          <map-page :regionTotal="regionTotalArr"></map-page>
        </div>
      </div>
      <div class="tier_1 third">
        <div class="tier_2 five">
          <each-province></each-province>
        </div>
        <div class="tier_2 six"></div>
      </div>
    </section>
  </div>
</template>

<script>
//解决跨域问题
const jsonp = require("jsonp");
import MapPage from "@/components/Map.vue";
import EachProvince from "@/components/EachProvince.vue";
export default {
  data() {
    return {
      nowDate: "", // 当前日期
      nowTime: "", // 当前时间
      nowWeek: "", // 当前星期
      allData: {},
      //面板统计数据
      chinaTotal: {},
      //各地区综合数据
      regionTotalArr: [],
      //当前疫情更新的时间
      lastUpdateTime: null,
    };
  },
  components: {
    MapPage,
    EachProvince,
  },
  created() {
    this.getData();
  },
  mounted() {
    // 页面加载完后显示当前时间
    this.dealWithTime(new Date());
    // 定时刷新时间
    this.timer = setInterval(() => {
      this.dealWithTime(new Date()); // 修改数据date
    }, 500);
  },
  destroyed() {
    if (this.timer) {
      // 注意在vue实例销毁前，清除我们的定时器
      clearInterval(this.timer);
    }
  },
  methods: {
    dealWithTime(data) {
      // 获取当前时间
      let formatDateTime;
      let Y = data.getFullYear();
      let M = data.getMonth() + 1;
      let D = data.getDate();
      let H = data.getHours();
      let Min = data.getMinutes();
      let S = data.getSeconds();
      let W = data.getDay();
      H = H < 10 ? "0" + H : H;
      Min = Min < 10 ? "0" + Min : Min;
      S = S < 10 ? "0" + S : S;
      switch (W) {
        case 0:
          W = "日";
          break;
        case 1:
          W = "一";
          break;
        case 2:
          W = "二";
          break;
        case 3:
          W = "三";
          break;
        case 4:
          W = "四";
          break;
        case 5:
          W = "五";
          break;
        case 6:
          W = "六";
          break;
        default:
          break;
      }
      this.nowDate = Y + "年" + M + "月" + D + "日 ";
      this.nowWeek = "周" + W;
      this.nowTime = H + ":" + Min + ":" + S;
      // formatDateTime = Y + "年" + M + "月" + D + "日 " + " 周" +W + H + ":" + Min + ":" + S;
    },
    async getData() {
      await jsonp(
        "https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",
        (err, res) => {
          if (err) {
            console.error(err.message);
          } else {
            const allData = JSON.parse(res.data);
            //获取面板的数据
            this.chinaTotal = allData.chinaTotal;
            //获取最近一次更新疫情数据的时间
            this.lastUpdateTime = allData.lastUpdateTime;
            //计算各省疫情数量并传给地图组件
            const regionTotalArr = allData.areaTree[0].children;
            const newregionTotalArr = regionTotalArr.map((item) => {
              if (item.total.nowConfirm === 0) {
                return {
                  name: item.name,
                  itemStyle: {
                    areaColor: "#E2EBF4",
                  },
                };
              } else if (item.total.nowConfirm <= 9) {
                return {
                  name: item.name,
                  itemStyle: {
                    areaColor: "#FFE7B2",
                  },
                };
              } else if (item.total.nowConfirm <= 99) {
                return {
                  name: item.name,
                  itemStyle: {
                    areaColor: "#FFCEA0",
                  },
                };
              } else if (item.total.nowConfirm <= 499) {
                return {
                  name: item.name,
                  itemStyle: {
                    areaColor: "#FFA577",
                  },
                };
              } else if (item.total.nowConfirm <= 999) {
                return {
                  name: item.name,
                  itemStyle: {
                    areaColor: "#FF6341",
                  },
                };
              } else if (item.total.nowConfirm <= 9999) {
                return {
                  name: item.name,
                  itemStyle: {
                    areaColor: "#FF2736",
                  },
                };
              } else {
                return {
                  name: item.name,
                  itemStyle: {
                    areaColor: "#DE1F05",
                  },
                };
              }
            });
            // 保存处理好的数据
            this.regionTotalArr = newregionTotalArr;
          }
        }
      );
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  position: relative;
}
header {
  position: relative;
  width: 100%;
  height: 1.2rem;
  background-color: #2f4f4f;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  h1 {
    font-weight: 400;
    font-size: 0.4rem;
  }
  .timer {
    position: absolute;
    right: 0.375rem;
  }
  .undatatimer {
    position: absolute;
    bottom: 0;
    font-size: 0.15rem;
  }
}
section {
  width: 100%;
  height: 100%;
  background: #191970;
  display: flex;
  .first {
    flex: 3;
  }
  .second {
    flex: 5;
    .second_top {
      width: 100%;
      height: 2.75rem;
      ul {
        display: flex;
        width: 100%;
        height: 100%;
        li {
          flex: 1;
          display: flex;
          flex-direction: column;
          div {
            flex: 1;
          }
          .num {
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: "electronicFont";
            font-size: 0.9rem;
          }
          .text {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.375rem;
            color: #fff;
          }
        }
      }
    }
    .second_bottom {
      width: 100%;
      height: 100%;
    }
  }
  .third {
    flex: 3;
  }
  .tier_1 {
    display: flex;
    flex-direction: column;
    .tier_2 {
      height: 50%;
    }
    .one {
      background-color: red;
    }
    .two {
      background-color: cyan;
    }
    .four {
      background-color: darkmagenta;
    }
    .five {
    }
    .six {
      background-color: pink;
    }
  }
}
</style>